<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="query.keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="querySerch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-form-item>

        <el-form-item label="" prop="resource">
          <el-col :span="12">
            <el-upload
                ref="upload"
                class="upload-demo"
                action="http://localhost:8080/shop/importExcel"
                :on-success="onSuccessFile">
              <el-button  type="primary">导入</el-button>
            </el-upload>
          </el-col>
        </el-form-item>

      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="pageData.rows"
              highlight-current-row
              v-loading="listLoading"
              @selection-change="selsChange"
              style="width: 100%;">

      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.auditLogs" style="width: calc(100% - 47px)" class="two-list">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="state" label="状态">
              <template slot-scope="props">
							  <span v-if="props.row.state ==1">
								<span style="color:#00B46D">通过</span>
							  </span>
                <span v-else>
								<span style="color:#D75C89">驳回</span>
                 			 </span>
              </template>
            </el-table-column>
            <el-table-column prop="note" label="备注"></el-table-column>
            <el-table-column prop="auditManager.username" label="审核人员"></el-table-column>
            <el-table-column prop="audit_time" label="审核时间"></el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="店铺名称" width="120" sortable>
      </el-table-column>
      <el-table-column prop="tel" label="联系电话" width="150" sortable>
      </el-table-column>
      <el-table-column prop="registerTime" label="注册时间" width="150" sortable>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="80" sortable>
        <template scope="scope">
          <span v-if="scope.row.state==1" style="color: yellowgreen">待审核</span>
          <span v-if="scope.row.state==2" style="color: blue">待激活</span>
          <span v-if="scope.row.state==3" style="color: green">已激活</span>
          <span v-if="scope.row.state==4" style="color: red">驳回</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" min-width="120" sortable>
      </el-table-column>
      <el-table-column prop="logo" label="图标" min-width="180" sortable>
        <template scope="scope">
          <el-image :src="'http://123.207.27.208'+scope.row.logo+'_50x50'"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="admin.username" label="店长" min-width="80" sortable>
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" :disabled="scope.row.state!==1" @click="handleAudit(scope.$index, scope.row)">审核</el-button>
          <el-button type="danger" :disabled="scope.row.state===4"  size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     :current-page="query.currentPage"
                     :page-size="query.pageSize"
                     :total="pageData.totals"
                     style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增修改界面-->
    <el-dialog :title="title" :visible.sync="shopVisible" :close-on-click-modal="false">
      <el-form :model="shop" label-width="80px" :rules="shopFormRules" ref="shopForm">
        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="shop.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="shop.tel" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="shop.state">
            <el-radio class="radio" :label="1">待审核</el-radio>
            <el-radio class="radio" :label="2">待激活</el-radio>
            <el-radio class="radio" :label="3">已激活</el-radio>
            <el-radio class="radio" :label="4">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="shop.address" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="图标" prop="logo">
          <el-input v-model="shop.logo" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="店长">
          <el-select v-model="shop.admin" placeholder="请选择" value-key="id">
            <el-option
                v-for="employee in employees"
                :key="employee.id"
                :label="employee.username"
                :value="employee">
              <span style="float: left">{{ employee.username }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ employee.phone }}</span>
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="deleteBlurWarn">取消</el-button>
        <el-button type="primary" @click.native="save" :loading="shopLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--店铺审核界面-->
    <el-dialog title="审核店铺" :visible.sync="shopAuditVisible" :close-on-click-modal="false">
      <el-form :model="shopAuditLog" label-width="80px" ref="shopAuditLogForm">
        <el-form-item label="备注" prop="note">
          <el-input type="textarea" v-model="shopAuditLog.note"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="auditCancel">取消</el-button>
        <el-button type="primary" @click.native="auditPass">通过</el-button>
        <el-button type="primary" @click.native="auditReject">驳回</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>

export default {
  data() {
    return {
      //标题
      title: '',

      //管理员列表
      employees: [],

      filters: {
        name: ''
      },

      //总页数和数据的相关参数
      pageData: {
        totals: 0,
        rows: []
      },
      //高级查询+分页查询的相关参数
      query: {
        currentPage: 1,
        pageSize: 5,
        keyword: ""
      },
      //加载框
      listLoading: false,
      //批量删除的相关参数
      sels: [],//列表选中列

      shopVisible: false,//店铺新增编辑界面是否显示
      shopAuditVisible: false,//店铺审核界面是否显示
      shopLoading: false,//店铺提交加载框是否显示
      //空值检验
      shopFormRules: {
        name: [
          {required: true, message: '请输入店铺名称', trigger: 'blur'}
        ]
      },
      //审核的编辑界面相关参数
      shopAuditLog: {
        shopId: null,
        note: ''
      },
      //店铺的编辑界面相关参数
      shop: {
        id: null,
        name: '',
        tel: '',
        registerTime: null,
        state: 1,
        address: '',
        logo: '',
        employee: null
      }

    }
  },
  methods: {
    //1.审核驳回
    auditReject() {
      this.$http.post("/shop/audit/reject", this.shopAuditLog)
          .then(result => {
            result = result.data;
            if (result.success) {
              this.$message({
                message: '驳回Ok',
                type: 'success'
              });
            } else {
              this.$message({
                message: '驳回失败',
                type: 'error'
              });
            }
            //关闭审核框
            this.shopAuditVisible = false;
            //重置审核界面的数据
            this.shopAuditLog = this.$options.data().shopAuditLog
            //重新获取数据列表
            this.getpagelist();
          })
    },

    //2.审核通过
    auditPass() {
      this.$http.post("/shop/audit/pass", this.shopAuditLog)
          .then(result => {

            result = result.data;

            //审核通过，提示信息
            if (result.success) {
              this.$message({
                message: '审核通过',
                type: 'success'
              });
              //审核失败，提示信息
            } else {
              this.$message({
                message: '审核失败',
                type: 'error'
              });
            }


            //关闭店铺审核界面
            this.shopAuditVisible = false;
            //重置审核界面的数据
            this.shopAuditLog = this.$options.data().shopAuditLog
            //重新获取数据列表
            this.getpagelist();
          })
    },

    //3.关闭店铺的新增编辑界面
    deleteBlurWarn() {
      this.shopVisible = false
    },

    //性别显示转换
    formatSex: function (row, column) {
      return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
    },

    //4.改变当前页，重新获取数据
    handleCurrentChange(currentPage) {
      this.query.currentPage = currentPage
      this.getpagelist();
    },

    //5.删除店铺
    handleDel: function (index, row) {
      this.$confirm('删除店铺会删除店长数据，确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        //开启加载框
        this.listLoading = true;
        //获取当前行的id
        let para = {id: row.id};
        //发送请求
        this.$http.delete("/shop/" + para.id).then((res) => {
          //删除成功执行
          //关闭加载框
          this.listLoading = false;
          //设置当前页
          // 如果当前页是最后一页，且删除的是当前页的最后一条数据，且当前页不是第一页，就将当前页设置为上一页
          var totalPage = Math.ceil(this.pageData.totals/this.query.pageSize);//总页数=最后一页
          if (this.query.currentPage==totalPage && (this.pageData.totals-1)%this.query.pageSize==0 && this.query.currentPage!=1 ){
            this.query.currentPage--;
          }
          //获取列表
          this.getpagelist();
        }).catch(
            alert(res.data.message)
        );
      }).catch(() => {

      });
    },

    //6.显示店铺的编辑界面
    handleEdit: function (index, row) {
      this.title = "编辑"
      //显示店铺的新增编辑界面
      this.shopVisible = true;
      this.shop = Object.assign({}, row);
      this.getEmployees()
    },

    //7.取消审核界面
    auditCancel(){
      //关闭审核界面
      this.shopAuditVisible = false;
      //重置审核界面的数据
      this.shopAuditLog = this.$options.data().shopAuditLog
    },

    //8.显示审核界面
    handleAudit: function (index, row) {
      //显示审核界面
      this.shopAuditVisible = true;
      console.log(row)
      //获取当前行数据的店铺id
      this.shopAuditLog.shopId = row.id;
    },

    //9.显示新增界面
    handleAdd: function () {
      this.title = "新增"
      //显示店铺的新增编辑界面
      this.shopVisible = true;
      this.getEmployees()
      this.shop = {
        id: null,
        name: '',
        tel: '',
        registerTime: null,
        state: 1,
        address: '',
        logo: '',
        employee: null
      };
    },

    //10.保存
    save: function () {
      this.$refs.shopForm.validate((valid) => {
        if (valid) {//表单校验
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            //店铺提交加载框是否显示
            this.shopLoading = true;
            //将添加的数据复制放到para里
            let para = Object.assign({}, this.shop);
            console.log(para)

            //发送请求
            this.$http.put("/shop", para)
                .then((res) => {
                  //关闭提交加载框
                  this.shopLoading = false;
                  //提交成功,返回信息
                  if (res.data.success) {
                    this.$message({
                      message: '保存成功',
                      type: 'success'
                    });
                    this.$refs['shopForm'].resetFields();
                    //关闭店铺的新增编辑界面
                    this.shopVisible = false;
                    //重新获取店铺列表数据
                    this.getpagelist();
                    //提交失败，返回信息
                  } else {
                    this.$message({
                      message: res.data.message,
                      type: 'error'
                    });
                  }

                });
          });
        }
      });
    },

    //11.批量删除——选择项改变
    selsChange: function (sels) {
      this.sels = sels;
    },

    //12.批量删除
    batchRemove: function () {
      //获取id数组
      var ids = this.sels.map(item => item.id);
      //确认框
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        //开启加载框
        this.listLoading = true;
        //发送请求
        this.$http.patch("/shop", ids)
            .then((res) => {
              //关闭加载框
              this.listLoading = false;
              //删除成功，提示信息
              if (res.data.success) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
                //删除失败，提示信息
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'error'
                });
              }
              //重新分页查询获取数据
              this.querySerch();
            });
        //点击取消执行
      }).catch(() => {

      });
    },

    //13.高级查询
    querySerch() {
      //当前页设置为第一页
      this.query.currentPage = 1
      //获取列表
      this.getpagelist()
    },

    //14.获取所有管理员用户
    getEmployees() {
      //发送请求
      this.$http.get("/emp/list").then(res => {
        if (res) {
          this.employees = res.data
        }
      })
    },

    //15.获取分页列表店铺
    getpagelist() {
      this.$http.post("/shop/list", this.query).then(res => {
        this.pageData = res.data
      })
    },

    //16.导出
    exportExcel(){
      location.href="http://localhost:8080/shop/exportExcel";
    },

    //17.导入成功之后消除文件列表，并给出提示
    onSuccessFile(){
      this.$refs.upload.clearFiles();
      this.$message({
        message: '导入成功',
        type: 'success'
      });
      //当前页设置为1
      this.query.currentPage=1;
      //重新获取列表
      this.getpagelist();
    }

  },
  mounted() {
    this.getpagelist();


  }
}

</script>

<style scoped>

</style>